<template>
  <div class="settings-page">
    <div class="page-header">
      <h2>系统设置</h2>
      <el-button type="primary" @click="saveSettings">保存设置</el-button>
    </div>

    <el-tabs v-model="activeTab">
      <!-- 基本设置 -->
      <el-tab-pane label="基本设置" name="basic">
        <el-form
          ref="basicFormRef"
          :model="basicForm"
          :rules="basicRules"
          label-width="120px"
          class="settings-form"
        >
          <el-form-item label="系统名称" prop="systemName">
            <el-input v-model="basicForm.systemName" />
          </el-form-item>
          
          <el-form-item label="系统Logo">
            <el-upload
              class="logo-uploader"
              action="/api/upload"
              :show-file-list="false"
              :before-upload="beforeLogoUpload"
              :on-success="handleLogoSuccess"
            >
              <img v-if="basicForm.logo" :src="basicForm.logo" class="logo" />
              <el-icon v-else class="logo-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          
          <el-form-item label="联系电话" prop="contactPhone">
            <el-input v-model="basicForm.contactPhone" />
          </el-form-item>
          
          <el-form-item label="联系邮箱" prop="contactEmail">
            <el-input v-model="basicForm.contactEmail" />
          </el-form-item>
          
          <el-form-item label="备案信息" prop="icp">
            <el-input v-model="basicForm.icp" />
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 支付设置 -->
      <el-tab-pane label="支付设置" name="payment">
        <el-form
          ref="paymentFormRef"
          :model="paymentForm"
          :rules="paymentRules"
          label-width="120px"
          class="settings-form"
        >
          <el-form-item label="支付方式">
            <el-checkbox-group v-model="paymentForm.enabledPayments">
              <el-checkbox label="alipay">支付宝</el-checkbox>
              <el-checkbox label="wechat">微信支付</el-checkbox>
              <el-checkbox label="unionpay">银联支付</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          
          <el-divider>支付宝配置</el-divider>
          <el-form-item label="AppID" prop="alipay.appId">
            <el-input v-model="paymentForm.alipay.appId" />
          </el-form-item>
          <el-form-item label="商户私钥" prop="alipay.privateKey">
            <el-input type="textarea" v-model="paymentForm.alipay.privateKey" rows="4" />
          </el-form-item>
          
          <el-divider>微信支付配置</el-divider>
          <el-form-item label="商户号" prop="wechat.mchId">
            <el-input v-model="paymentForm.wechat.mchId" />
          </el-form-item>
          <el-form-item label="API密钥" prop="wechat.apiKey">
            <el-input v-model="paymentForm.wechat.apiKey" show-password />
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 安全设置 -->
      <el-tab-pane label="安全设置" name="security">
        <el-form
          ref="securityFormRef"
          :model="securityForm"
          :rules="securityRules"
          label-width="120px"
          class="settings-form"
        >
          <el-form-item label="密码策略">
            <el-switch
              v-model="securityForm.passwordPolicy.enabled"
              active-text="启用"
              inactive-text="禁用"
            />
          </el-form-item>
          
          <template v-if="securityForm.passwordPolicy.enabled">
            <el-form-item label="最小长度" prop="passwordPolicy.minLength">
              <el-input-number 
                v-model="securityForm.passwordPolicy.minLength"
                :min="6"
                :max="32"
              />
            </el-form-item>
            
            <el-form-item label="复杂度要求">
              <el-checkbox-group v-model="securityForm.passwordPolicy.requirements">
                <el-checkbox label="uppercase">必须包含大写字母</el-checkbox>
                <el-checkbox label="lowercase">必须包含小写字母</el-checkbox>
                <el-checkbox label="numbers">必须包含数字</el-checkbox>
                <el-checkbox label="special">必须包含特殊字符</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </template>
          
          <el-divider>登录安全</el-divider>
          
          <el-form-item label="登录验证码">
            <el-switch
              v-model="securityForm.captcha.enabled"
              active-text="启用"
              inactive-text="禁用"
            />
          </el-form-item>
          
          <el-form-item label="登录失败锁定">
            <el-switch
              v-model="securityForm.loginLock.enabled"
              active-text="启用"
              inactive-text="禁用"
            />
          </el-form-item>
          
          <template v-if="securityForm.loginLock.enabled">
            <el-form-item label="失败次数" prop="loginLock.attempts">
              <el-input-number
                v-model="securityForm.loginLock.attempts"
                :min="3"
                :max="10"
              />
            </el-form-item>
            
            <el-form-item label="锁定时长(分)" prop="loginLock.duration">
              <el-input-number
                v-model="securityForm.loginLock.duration"
                :min="5"
                :max="1440"
              />
            </el-form-item>
          </template>
        </el-form>
      </el-tab-pane>

      <!-- 通知设置 -->
      <el-tab-pane label="通知设置" name="notification">
        <el-form
          ref="notificationFormRef"
          :model="notificationForm"
          :rules="notificationRules"
          label-width="120px"
          class="settings-form"
        >
          <el-form-item label="邮件通知">
            <el-switch
              v-model="notificationForm.email.enabled"
              active-text="启用"
              inactive-text="禁用"
            />
          </el-form-item>
          
          <template v-if="notificationForm.email.enabled">
            <el-form-item label="SMTP服务器" prop="email.smtp.host">
              <el-input v-model="notificationForm.email.smtp.host" />
            </el-form-item>
            
            <el-form-item label="SMTP端口" prop="email.smtp.port">
              <el-input-number v-model="notificationForm.email.smtp.port" :min="1" :max="65535" />
            </el-form-item>
            
            <el-form-item label="发件人邮箱" prop="email.smtp.username">
              <el-input v-model="notificationForm.email.smtp.username" />
            </el-form-item>
            
            <el-form-item label="SMTP密码" prop="email.smtp.password">
              <el-input v-model="notificationForm.email.smtp.password" show-password />
            </el-form-item>
          </template>
          
          <el-divider>短信通知</el-divider>
          
          <el-form-item label="短信通知">
            <el-switch
              v-model="notificationForm.sms.enabled"
              active-text="启用"
              inactive-text="禁用"
            />
          </el-form-item>
          
          <template v-if="notificationForm.sms.enabled">
            <el-form-item label="短信平台">
              <el-select v-model="notificationForm.sms.provider">
                <el-option label="阿里云" value="aliyun" />
                <el-option label="腾讯云" value="tencent" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="AccessKey" prop="sms.accessKey">
              <el-input v-model="notificationForm.sms.accessKey" />
            </el-form-item>
            
            <el-form-item label="SecretKey" prop="sms.secretKey">
              <el-input v-model="notificationForm.sms.secretKey" show-password />
            </el-form-item>
            
            <el-form-item label="短信签名" prop="sms.signName">
              <el-input v-model="notificationForm.sms.signName" />
            </el-form-item>
          </template>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

// 当前激活的标签页
const activeTab = ref('basic')

// 基本设置表单
const basicForm = reactive({
  systemName: '旅游管理系统',
  logo: '',
  contactPhone: '',
  contactEmail: '',
  icp: ''
})

// 支付设置表单
const paymentForm = reactive({
  enabledPayments: ['alipay', 'wechat'],
  alipay: {
    appId: '',
    privateKey: ''
  },
  wechat: {
    mchId: '',
    apiKey: ''
  }
})

// 安全设置表单
const securityForm = reactive({
  passwordPolicy: {
    enabled: true,
    minLength: 8,
    requirements: ['uppercase', 'lowercase', 'numbers']
  },
  captcha: {
    enabled: true
  },
  loginLock: {
    enabled: true,
    attempts: 5,
    duration: 30
  }
})

// 通知设置表单
const notificationForm = reactive({
  email: {
    enabled: false,
    smtp: {
      host: '',
      port: 465,
      username: '',
      password: ''
    }
  },
  sms: {
    enabled: false,
    provider: 'aliyun',
    accessKey: '',
    secretKey: '',
    signName: ''
  }
})

// 表单验证规则
const basicRules = {
  systemName: [
    { required: true, message: '请输入系统名称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  contactEmail: [
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ]
}

const paymentRules = {
  'alipay.appId': [
    { required: true, message: '请输入支付宝AppID', trigger: 'blur' }
  ],
  'wechat.mchId': [
    { required: true, message: '请输入微信商户号', trigger: 'blur' }
  ]
}

const securityRules = {
  'passwordPolicy.minLength': [
    { required: true, message: '请设置最小密码长度', trigger: 'blur' }
  ]
}

const notificationRules = {
  'email.smtp.host': [
    { required: true, message: '请输入SMTP服务器地址', trigger: 'blur' }
  ],
  'email.smtp.username': [
    { required: true, message: '请输入发件人邮箱', trigger: 'blur' }
  ]
}

// Logo上传前的验证
const beforeLogoUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isImage) {
    ElMessage.error('上传Logo只能是图片格式!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('上传Logo大小不能超过 2MB!')
    return false
  }
  return true
}

// Logo上传成功的回调
const handleLogoSuccess = (response) => {
  basicForm.logo = response.url
  ElMessage.success('Logo上传成功')
}

// 保存设置
const saveSettings = async () => {
  try {
    const settings = {
      basic: basicForm,
      payment: paymentForm,
      security: securityForm,
      notification: notificationForm
    }
    
    // 这里应该调用API保存设置
    console.log('保存设置:', settings)
    
    ElMessage.success('设置保存成功')
  } catch (error) {
    ElMessage.error('保存设置失败')
  }
}
</script>

<style scoped>
.settings-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  font-weight: 600;
}

.settings-form {
  max-width: 800px;
  margin: 20px auto;
}

.logo-uploader {
  text-align: center;
}

.logo-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.logo-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.logo-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
  line-height: 120px;
}

.logo {
  width: 120px;
  height: 120px;
  display: block;
}
</style>